<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <div>
        <video id="thevideo" width="600px" height="400px" src="http://mirrorblender.top-ix.org/peach/bigbuckbunny_movies/big_buck_bunny_1080p_stereo.ogg" autoplay="false" controls="true" loop="false" volume="0.5"/>
    </div>
    <div>
    <div id="loadingStatus">
        0%
    </div>

        <script>

            window.addEventListener('load', eventWindowLoaded, false);
            function eventWindowLoaded() {
                var videoElement = document.getElementById("thevideo");
                videoElement.addEventListener('progress',updateLoadingStatus,false);
                videoElement.addEventListener('canplaythrough',playVideo,false);
            }

            function updateLoadingStatus() {
                var loadingStatus = document.getElementById("loadingStatus");
                var videoElement = document.getElementById("thevideo");
                var percentLoaded = parseInt(((videoElement.buffered.end(0) /
                        videoElement.duration) * 100));
                document.getElementById("loadingStatus").innerHTML =   percentLoaded + '%';
            }

            function playVideo() {
                var videoElement = document.getElementById("thevideo");
                //videoElement.play();
            }
        </script>
</div>
</body>
</html>